<template>
    <div class="identity" >
        <p class="tisp">请使用账号绑定手机的微信实名认证信息，以免清关失败！</p>
        <div class="identity__box">
            <div class="identity__box__item">
                <div class="identity__box__item--fl">真实姓名</div>
                <div class="identity__box__item--fr">
                    <input type="text" class="identity__box__item--fr__input" placeholder="请输入" v-model="plugins.name" maxlength="20" v-bind:disabled="source == 'look' ? true : false" />
                </div>
            </div>
            <div class="identity__box__item">
                <div class="identity__box__item--fl">证件类型</div>
                <div class="identity__box__item--fr" style="font-size:14px;">身份证</div>
            </div>
            <div class="identity__box__item">
                <div class="identity__box__item--fl">身份证号码</div>
                <div class="identity__box__item--fr">
                    <input type="text" class="identity__box__item--fr__input" placeholder="请输入" v-model="plugins.idCard" maxlength="18" @focus="clearIdcard" v-bind:disabled="source == 'look' ? true : false" />
                </div>
            </div>
            <!-- 编辑模块 -->
            <template v-if="source == 'editor'">
                <div class="identity__box__item" v-if="identityPicOpen == 1">
                    <div class="identity__box__item--fl">身份证正面照</div>
                    <div class="identity__box__item--fr" >
                        <van-uploader :after-read="afterReadPositive" v-if="!plugins.positiveCard">
                            <div class="identity__box__item--fr__botton" >上传证件</div>
                        </van-uploader>
                        
                        <van-uploader :after-read="afterReadPositive" v-if="plugins.positiveCard">
                            <img :src="$imgUrlHead + plugins.positiveCard" class="identity__box__item--fr__id-card"  />
                        </van-uploader>
                    </div>
                </div>

                <div class="identity__box__item" v-if="identityPicOpen == 1">
                    <div class="identity__box__item--fl">身份证被面照</div>
                    <div class="identity__box__item--fr">
                        <van-uploader :after-read="afterReadBack" v-if="!plugins.backCard">
                            <div class="identity__box__item--fr__botton" >上传证件</div>
                        </van-uploader>
                        <van-uploader :after-read="afterReadBack" v-if="plugins.backCard">
                            <img :src="$imgUrlHead + plugins.backCard" class="identity__box__item--fr__id-card"  />
                        </van-uploader>
                    </div>
                </div>
            </template>
            <!-- 编辑模块 -->
            
            <!-- 查看模块 -->
            <template v-if="source == 'look'">
                <div class="identity__box__item" v-if="plugins.positiveCard">
                    <div class="identity__box__item--fl">身份证正面照</div>
                    <div class="identity__box__item--fr" >
                        <img :src="$imgUrlHead + plugins.positiveCard" class="identity__box__item--fr__id-card"  />
                    </div>
                </div>

                <div class="identity__box__item" v-if="plugins.backCard">
                    <div class="identity__box__item--fl">身份证被面照</div>
                    <div class="identity__box__item--fr">
                       <img :src="$imgUrlHead + plugins.backCard" class="identity__box__item--fr__id-card"  />
                    </div>
                </div>
            </template>
            <!-- 查看模块 -->

           
        </div>

       <div class="b-btn" v-if="source == 'editor'"><a class="btn-r" href="javascript:void(0);" :style="{background: themes.color}" @click="save">保存</a></div>

    </div>
</template>

<script>
import {mapState} from 'vuex';
import uploadimg from "utils/uploadimg";
import formCheck from 'utils/formCheck';
import {overseasSave, findOverseasUserInfo , overseasInfo} from "api/settlement";

export default {
    computed: {
        ...mapState(['themes']),
    },
    data() {
        return{
            plugins: {
                //身份证正面照
                positiveCard: '',    
                //身份证背面照
                backCard: '' , 
                idCard: '',
                name: ''
            },
            source: null,   //来源 editor 是编辑 
            identityPicOpen: null //是否要身份证
        }
    },
    mounted() {
        let that = this
        
        
        // 1 是要身份证 0 不用身份证
        that.identityPicOpen = that.$route.query.identityPicOpen * 1

        // editor 是编辑 look是查看
        this.source = this.$route.query.source

        if (this.$route.query.id) {
            this.getFindOverseasUserInfo()
        }

        if ( this.$route.query.source == 'look') {
            this.getoverseasInfo(this.$route.query.subId)
        }

    },
    methods: {

        //编辑的回显
        async getFindOverseasUserInfo() {
            try {
                let res = await findOverseasUserInfo()

                if (res.status != 1) {
                    this.$toast(res.msg)
                    return
                }

                let {result} = res
                
                this.plugins = {
                    positiveCard: result.cardPositive,
                    backCard: result.cardBack,
                    idCard: result.cardNum,
                    name: result.realName
                }

            } catch (error) {
            }
        },
        
        //订单详情的查看回显 是不能不编辑
        async getoverseasInfo(subId) {
            try {
                let res = await overseasInfo({subId})

                if (res.status != 1) {
                    this.$toast(res.msg)
                    return
                }

                let {result} = res
                
                this.plugins = {
                    positiveCard: result.cardPositive,
                    backCard: result.cardBack,
                    idCard: result.cardNum,
                    name: result.realName
                }

            } catch (error) {
            }
        },

        //身份证前
        afterReadPositive(files) {
            this.getPhotos(files, true)    
        },

        //身份证后
        afterReadBack (files) {
            this.getPhotos(files, false)    
        },

        async getPhotos(files, flag) {
            try {
                let result = await uploadimg(files.file)

                if (!result.success) {
                    this.$toast(result.msg)
                    return
                }
                
                flag ?  this.plugins.positiveCard = result.photos : this.plugins.backCard = result.photos
                
            } catch (error) {
                this.$toast(error.msg)
            }
        },

        //清除身份证
        clearIdcard() {
            this.plugins.idCard = ''
        },
        
        //保存跨境信息
        save() {

            let errorMsg = formCheck.isNonEmpty(this.plugins.name, '请输入真实姓名') ||  
                formCheck.isNonEmpty(this.plugins.idCard, '请输入身份证号码') ||
                (this.identityPicOpen == 1 &&  formCheck.isNonEmpty(this.plugins.positiveCard, '请上传身份证正面照')) ||
                (this.identityPicOpen == 1 &&  formCheck.isNonEmpty(this.plugins.backCard, '请上传身份证背面照')) 
                // formCheck.isCardNo(this.plugins.idCard, '请输入正确的身份证号码')
                        
            if (errorMsg) {
                this.$toast(errorMsg);
                return 
            }
            

            let params = {
                cardNum: this.plugins.idCard,//跨境身份证号
                certType: 'ID_CARD',
                realName: this.plugins.name, //真实姓名（跨境）
                cardBack: this.plugins.backCard, //身份证背面照
                cardPositive: this.plugins.positiveCard, //身份证正面照
                id: this.$route.query.id    
            }
            overseasSave(params).then(res => {
                if (res.status != 1) {
                    this.$$toast(res.msg)
                    return
                }

                this.$toast({
                    message: '保存成功',
                    forbidClick: true
                });

                setTimeout(() => {
                    this.$router.back();
                    this.$router.isBack = true
                },1500)

            })
        }
    }
}
</script>

<style lang="stylus" scoped>
    .tisp {
        width: 100%;
        padding: 0.24rem 0.32rem;
        color: rgba(230, 162, 60, 1);
	    background-color: rgba(253, 246, 236, 1);
        font-size: 0.24rem;   
    }
    .identity {
        height: 100%;
        font-family: arial;
        &__box {
            padding: 0 12px;
            background-color: #fff;
            &__item {
                display: flex;
                padding: 10px 0;
                border-bottom: 1px solid #f8f8f8;
                &:last-child {
                    border-bottom:none;
                }
                &--fl {
                    font-size: 14px;
                    margin-right: 10px;
                    width: 130px;
                }
                &--fr {
                    width: 100%;
                    &__input {
                        font-size: 14px;
                        color: #323233;
                        box-sizing: border-box;
                        background-color: transparent;
                    }
                    &__id-card {
                        width: 200px;
                        height: 126px;
                    }
                    &__botton {
                        position: relative;
                        font-size: 14px;
                    }
                }
            }
            
        }
        .hiddenInput {
            opacity: 0;
            position:absolute;
            z-index: 1;
        }
    }
</style>

